<template>
	<!-- 云店资质认证 -->
	<view class="flashOpen-main" :class="[isShow?'flashOpenGd':'']">
		<view class="flashOpen-form">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="营业执照名称 " required :label-width="110">
					<uni-easyinput v-model="baseFormData.business_name" placeholder="请输入营业执照名称" />
				</uni-forms-item>
				<uni-forms-item label="社会统一信用代码" required :label-width="110">
					<uni-easyinput v-model="baseFormData.business_number" placeholder="请输入社会统一信用代码" />
				</uni-forms-item>
				<uni-forms-item label="营业执照图片" required :label-width="110">
					<uni-file-picker
						limit="1"
						:auto-upload="true"
						v-model="business_image_value"
						fileMediatype="image"
						mode="grid"
						@select="(e) => select(e, 'business')"
						@delete="(e) => delIMG(e, 'business')"
					></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="法人身份证姓名" required :label-width="110">
					<uni-easyinput v-model="baseFormData.id_card_name" placeholder="请输入法人身份证姓名" />
				</uni-forms-item>
				<uni-forms-item label="法人身份证号" required :label-width="110">
					<uni-easyinput v-model="baseFormData.id_card" placeholder="请输入法人身份证号" />
				</uni-forms-item>
				<uni-forms-item label="法人身份证信息面" required :label-width="110">
					<uni-file-picker
						limit="1"
						:auto-upload="true"
						v-model="id_card_front_image_value"
						fileMediatype="image"
						mode="grid"
						@select="(e) => select(e, 'id_card_front')"
						@delete="(e) => delIMG(e, 'id_card_front')"
					></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="法人身份证国徽面" required :label-width="110">
					<uni-file-picker
						limit="1"
						:auto-upload="true"
						v-model="id_card_reverse_image_value"
						fileMediatype="image"
						mode="grid"
						@select="(e) => select(e, 'd_card_reverse')"
						@delete="(e) => delIMG(e, 'd_card_reverse')"
					></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="身份证到期日期" required :label-width="110">
					<view class="dateBox" @click="show = true">
						<text v-if="baseFormData.id_card_expiredate">{{ formatDate(baseFormData.id_card_expiredate) }}</text>
						<text v-else style="color: #999">请选择到期日期</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="开店协议" :label-width="110">
					<view style="display: flex;align-items: center;height: 100%;">
						<text style="font-size: 26rpx;color: #444;display: flex;">我已阅读并接受 <text style="text-decoration: underline;color: #2979ff;" @click="getOpen">《开店协议》</text> </text>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<u-datetime-picker
			ref="datetimePicker"
			:show="show"
			v-model="baseFormData.id_card_expiredate"
			mode="date"
			@confirm="show = false"
			@close="show = false"
		></u-datetime-picker>

		<!-- 协议内容 -->
		<u-popup :show="isShow" @close="getClose" @open="getOpen" :round="10" mode="bottom" :closeable="true">
			<view class="lookXY-box">
				<view class="lookXY-header">开店协议</view>
				<view class="content">
					<div class="signature-content">
						<view class="txtValueStyle" v-html="txtValue">
						</view>
						<img :src="imageUrl" style="width: 140rpx;height: 80rpx;" class="images"></image>
					</div>
				</view>
				<view class="" style="background-color: #fff;box-sizing: border-box;padding: 20rpx;">
					<view class="signature_btn" @click="gotoQmPath">点击签名</view>
					<view class="signature_btn" @click="getClose">完成</view>
				</view>
			</view>
		</u-popup>

		<view class="flashOpen-sub active" @click="getcloudManageQualification">提交认证</view>
		<view class="flashOpen-sub" @click="gotoPath" v-if="!isEdit">返回首页</view>
	</view>
</template>

<script>
import { flashManageQualification, flashManageInfo } from '../../../api/flashManage/index.js';
import { BASE_URL,BASE_URLS } from '../../../api/baseurl.js';
import { imageUrl,validateTaxID,validateIDCard } from '../../../utils/tools.js';
import {storeAgreement} from "../../../api/cloudManage/index.js";
export default {
	data() {
		return {
			baseFormData: {
				business_name: '',
				business_number: '',
				business_image: '',
				id_card_name: '',
				id_card: '',
				id_card_expiredate:"",
				id_card_front_image: '',
				id_card_reverse_image: '',
				sign_agreement_file: '',
				type: '1'
			},
			// 营业执照图片
			business_image_value: [],
			// 法人身份证信息面
			id_card_front_image_value: [],
			// 法人身份证国徽面
			id_card_reverse_image_value: [],
			tokenValue: '',
			
			show:false,
			imageUrl:"",
			isShow:false,
			
			txtValue:"",
			gzImage:""
		};
	},
	async onLoad(option) {
		this.getflashManageInfo();
		this.tokenValue = (await uni.getStorageSync('token')) || '';
	},
	
	async onShow(){
		this.getstoreAgreement();
		this.imageUrl = await uni.getStorageSync("signatureUrl") || '';
	},
	
	methods: {
		async getstoreAgreement(){
			try{
				const resData = await storeAgreement({
					type:0
				});
				this.txtValue = resData.data.txt;
				this.gzImage = resData.data.img;
			}catch(e){
				throw Error(e);
			}
		},
		// 提交认证
		async getcloudManageQualification() {
			
			if(!this.baseFormData.business_name){
				return uni.showToast({
					title:'营业执照名称不能为空',
					icon:'none'
				})
			}
			
			if(!this.baseFormData.business_number){
				return uni.showToast({
					title:'社会统一信用代码不能为空',
					icon:'none'
				})
			}
			
			if(!validateTaxID(this.baseFormData.business_number)){
				uni.showToast({
					title:'社会统一信用代码格式错误',
					icon:'none'
				})
			}
			
			if(this.business_image_value.length == 0){
				return uni.showToast({
					title:'请上传营业执照图片',
					icon:'none'
				})
			}
			
			if(!this.baseFormData.id_card_name){
				return uni.showToast({
					title:'法人身份证姓名不能为空',
					icon:'none'
				})
			}
			
			if(!this.baseFormData.id_card){
				return uni.showToast({
					title:'法人身份证号不能为空',
					icon:'none'
				})
			}
			
			if(!validateIDCard(this.baseFormData.id_card)){
				return uni.showToast({
					title:'法人身份证号格式错误',
					icon:'none'
				})
			}
			
			if(this.id_card_front_image_value.length == 0){
				return uni.showToast({
					title:'请上传法人身份证信息面',
					icon:'none'
				})
			}
			
			if(this.id_card_reverse_image_value.length == 0){
				return uni.showToast({
					title:'请上传法人身份证国徽面',
					icon:'none'
				})
			}
			
			if(!this.baseFormData.id_card_expiredate){
				return uni.showToast({
					title:'身份证过期日期不能为空',
					icon:'none'
				})
			}
			
			if(!this.baseFormData.sign_agreement_file){
				return uni.showToast({
					title:'请完成签字协议',
					icon:'none'
				})
			}
			
			this.baseFormData.business_image = this.business_image_value[0].fullurl;
			this.baseFormData.id_card_front_image = this.id_card_front_image_value[0].fullurl;
			this.baseFormData.id_card_reverse_image = this.id_card_reverse_image_value[0].fullurl;
			this.baseFormData.id_card_expiredate = this.formatDate(this.baseFormData.id_card_expiredate);
			
			try {
				const resData = await flashManageQualification(this.baseFormData);
				uni.showToast({
					title: resData.msg,
					icon: 'none'
				});
				setTimeout(() => {
					if (!this.isEdit) {
						uni.reLaunch({
							url: '/pages/user/user'
						});
					} else {
						uni.navigateBack(-1);
					}
				}, 500);
			} catch (e) {
				uni.reLaunch({
					url:'/pages/user/user'
				})
				throw Error(e);
			}
		},

		//图片上传
		select(e, type) {
			let filePath = e.tempFilePaths[0];
			uni.uploadFile({
				url: BASE_URL + 'common/upload',
				filePath: filePath,
				name: 'file',
				header: { token: this.tokenValue },
				success: (uploadFileRes) => {
					let path = JSON.parse(uploadFileRes.data);
					if (type == 'business') {
						this.business_image_value.push({
							url: path.data.fullurl,
							fullurl: path.data.url
						});
					} else if (type == 'id_card_front') {
						this.id_card_front_image_value.push({
							url: path.data.fullurl,
							fullurl: path.data.url
						});
					} else if (type == 'd_card_reverse') {
						this.id_card_reverse_image_value.push({
							url: path.data.fullurl,
							fullurl: path.data.url
						});
					}
				},
				fail: (err) => {
					console.log(err);
				}
			});
		},

		//图片删除
		delIMG(e, type) {
			if (type == 'business') {
				this.business_image_value = [];
			} else if (type == 'id_card_front') {
				this.id_card_front_image_value = [];
			} else if (type == 'd_card_reverse') {
				this.id_card_reverse_image_value = [];
			}
		},

		// 门店信息获取
		async getflashManageInfo() {
			try {
				const resData = await flashManageInfo({
					type: '0'
				});
				const storeInfo = resData.data;
				this.baseFormData.business_name = storeInfo.business.name;
				this.baseFormData.business_number = storeInfo.business.number;
				this.baseFormData.id_card_name = storeInfo.idcard.name;
				this.baseFormData.id_card = storeInfo.idcard.idcard;
				this.baseFormData.id_card_expiredate = storeInfo.idcard.expiredate;
				
				if(storeInfo.business.image){
				this.business_image_value = [
					{
						url: imageUrl(storeInfo.business.image),
						fullurl: storeInfo.business.image
					}
				];
				}
				
				if(storeInfo.idcard.front){
				this.id_card_front_image_value = [
					{
						url: imageUrl(storeInfo.idcard.front),
						fullurl: storeInfo.idcard.front
					}
				];
				}
				
				if(storeInfo.idcard.reverse){
				this.id_card_reverse_image_value = [
					{
						url: imageUrl(storeInfo.idcard.reverse),
						fullurl: storeInfo.idcard.reverse
					}
				];
				}
			} catch (e) {
				throw Error(e);
			}
		},

		gotoPath() {
			uni.switchTab({
				url: '/pages/nationwideDelivery/nationwideDelivery'
			});
		},
		
		formatDate(dates) {
			if (!dates) {
				return '';
			}
			const date = new Date(dates);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		
		gotoPath(){
			uni.navigateTo({
				url:'/pages/storeSide/signatureBoard/signatureBoard'
			})
		},
		
		// 打开协议
		getOpen() {
			this.isShow = true;
		},
		
		gotoQmPath(){
			uni.navigateTo({
				url:'/pages/storeSide/signatureBoard/signatureBoard'
			})
		},
		
		// 关闭协议
		getClose() {
			this.isShow = false;
			if(this.imageUrl){
			uni.uploadFile({
				url: BASE_URL + 'store/agreement_file',
				filePath: this.imageUrl,
				name: 'image',
				header: { token: this.tokenValue },
				formData:{
					type:1
				},
				success: (fileInfo) => {
					let fileInfoData = JSON.parse(fileInfo.data);
					this.baseFormData.sign_agreement_file = BASE_URLS + fileInfoData.data.file_path;
				},
				fail: (err) => {
					console.log(err);
				}
			});
			}
		},
	}
};
</script>

<style>
page {
	background-color: #fff;
	height: 100%;
}
</style>

<style scoped lang="scss">
.flashOpen-main {
	box-sizing: border-box;
	padding: 30rpx;
	.flashOpen-sub {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #f3f3f3;
		color: #444;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		border: 1px #dbdbdb solid;
	}

	.active {
		background-color: rgb(41, 121, 255);
		color: #fff;
		border: none;
	}

	.lookXY {
		color: rgb(41, 121, 255);
		height: 100%;
		display: flex;
		align-items: center;
		text-decoration: underline;
	}

	.lookXY-box {
		box-sizing: border-box;
		padding: 30rpx;
		color: #444;
		font-size: 28rpx;
		.lookXY-header {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.content {
			height: 60vh;
			overflow-y: scroll;
			.signature-content {
				margin-bottom: 40rpx;
				position: relative;
				.images{
					position: absolute;
					left: 40px;
					bottom: 20px;
					z-index: 1;
				}
			}
			.signatureArea {
				
			}
		}

		.signature_btn {
			background-color: rgb(41, 121, 255);
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
	}

	.signature-box {
		height: 90vh;
	}
}

.flashOpenGd{
	overflow: hidden;
}

.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}


.dateBox {
	height: 35px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	color: #444;
	line-height: 35px;
	box-sizing: border-box;
	padding: 0px 10px;
}
</style>
